<template>
    <div class="search">
        <input @keyup.enter="search" v-model="str" type="search" placeholder="请输入英雄">
       
    </div>
</template>

<script>
    export default {
        name:"HeroSearch",
        data(){
            return{
                str:""
            }
        },
        methods:{
            search(){
                // console.log(this);
                // 将数据传递给 父组件
                // 触发自定义事件
                this.$emit("sousuo",this.str);

                // this.$emit("click");

            }
        },
        beforeDestroy(){
            //解绑自定义事件
            this.$off("sousuo");
        }
    }
</script>

<style scoped>
.search{
    width: 300px;
    margin: 20px auto;
}
.search input{
    width: 300px;
    height: 40px;
    
}
</style>